<template>
  <div>
    <div class="dialog-wrap">
      <div v-if="isShow" class="dialog-cover" @click="closeMyself"></div>
      <transition name="drop">
        <div v-if="isShow" class="dialog-content">
          <i class="fa fa-hand-o-up" aria-hidden="true"></i>
          <slot></slot>
        </div>
      </transition>
    </div>
  </div>
</template>

<script>
    export default {
      name: "dialog_transpond",
      props: {
        isShow: {
          type: Boolean,
          default: false
        }
      },
      data () {
        return {
        }
      },
      methods: {
        closeMyself () {
          this.$emit('on-close')
        }
      }
    }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">

  .dialog-cover {
    background-color: black;
    opacity: .5;
    position: fixed;
    z-index: 15;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .dialog-content{
    i{
      position: fixed;
      right: 10px;
      top: 10px;
      z-index: 20;
      font-size 36px
      color #833aff
      animation:mymove 1s infinite;
    }
    @keyframes mymove {
      from {top:40px;}
      to {top:2px;}
    }
  }
</style>
